<template>
  <div class="era">
    <div class="era1">
      <div>搜索：<input type="text" /></div>
      <div>
        订单状态：
        <select name="" id="">
          <option value="">全部</option>
          <option value="">未付款</option>
          <option value="">已付款</option>
        </select>
      </div>
      <button @click="findid()">查询</button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="adminId" label="ID" width="150" height="30">
      </el-table-column>
      <el-table-column prop="orderId" label="订单编号" width="120">
      </el-table-column>
      <el-table-column prop="userId" label="用户名" width="120">
      </el-table-column>
      <el-table-column prop="detailsDate" label="用餐时间" width="120">
      </el-table-column>
      <el-table-column prop="detailsMoney" label="消费金额" width="300">
      </el-table-column>
      <el-table-column prop="zffs" label="支付方式" width="200">
      </el-table-column>
      <el-table-column prop="detailsNum" label="就餐桌号" width="200">
      </el-table-column>
      <el-table-column prop="zt" label="状态" width="200"> </el-table-column>
      <el-table-column prop="cz" label="操作" width="150">
        <template>
          <el-button @click="handleClick()" type="text" size="small"
            >查看订单</el-button
          >
          <!-- <el-button @click="del()" type="text" size="small">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="fenye">
      <el-pagination background layout="prev, pager, next" :total="500">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { Era,findid } from "@/apis/yanwengang/yanwengang.js";
export default {
  methods: {
    handleClick() {
      console.log(111);
    },
    findid(){
      findid(this.id).then((ok)=>{
        console.log(ok);
      })
    }
  },
  mounted() {
    //今日订单
    Era().then((ok) => {
      console.log(ok);
      this.tableData = ok.data.data;
      this.id=ok.data.data[0].orderId
    });
  },

  data() {
    return {
      tableData: [{}],
      id:""
    };
  },
};
</script>

<style scoped>
.era1 {
  /* width: 100%; */
  height: 100px;
  border: 1px solid #ccc;
  line-height: 100px;
  display: flex;
  justify-content: space-evenly;
}
.era1 input {
  width: 300px;
  height: 30px;
  border: 0;
}
.era1 button {
  width: 100px;
  height: 50px;
  margin: 25px;
  background-color: rgb(83, 215, 238);
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
}
.fenye {
  margin-top: 8px;
}
</style>